<template>
	<view style="display: flex; margin: 30rpx 40rpx 60rpx 40rpx; align-items: center;">
		<view class="header" :style="'background-image:url('+ (basedata.HeadImg==null?'https://nx5.abc5g.com/res/static/logo.png':basedata.HeadImg) +')'"></view>
		<view class="studentinfo">
			<view style="margin-bottom: 3px;">
				<text class="text-16">{{basedata.Name}}</text>
				<text class="youxiaoqi" style="font-weight:normal;"> 有效期:{{basedata.Period}} </text>
			</view>
			<view>{{basedata.Phone}}</view>
		</view>
		<view class="gold" v-if="showGold">
			<u-image src="https://nx5.abc5g.com/images/been2.png" width="50rpx" height="50rpx" mode="aspectFit"></u-image>
			{{basedata.Gold}}
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { ktlapi, OT, ktluser } from '@/utils';
	/** 用户头像部分 */
	defineOptions({ name: 'user-header', inheritAttrs: false });
	
	const basedata = ref<any>({});
	const showGold = ref<boolean>(false);
	
	function loadStudent(){
		uni.showLoading({
			title: '加载中'  
		});
		ktlapi({
			apiurl: OT.CommandSet,
			action: "Cus_HomeStudent",
			data: {
				"AccountId": ktluser.BaseInfo().AccountID, 
			}
		}).then((res: any) => {   
			basedata.value = res.data.tables[0].table[0];
			const GoldInfo = res.data.tables[4].table[0];
			basedata.value.Gold = GoldInfo.Gold || 0;
		});
	}
	
	function loadTeacher(){
		uni.showLoading({
			title: '加载中'
		});
		ktlapi({
			apiurl: OT.CommandSet,
			action: "Cus_HomeTeacher",
			data: {
				"AccountId": ktluser.BaseInfo().AccountID, 
			}
		}).then((res: any) => {
			basedata.value = res.data.tables[0].table[0];
		});
	}
	
	onShow(()=>{
		if (ktluser.hasRole(2)) {
		 	loadTeacher();
		} else if (ktluser.hasRole([3, 4]) && !ktluser.hasRole(2)) {
			showGold.value = true;
		 	loadStudent();
		}
	})
</script>

<style lang="scss" scoped>
	.header {
		width: 120rpx;
		height: 120rpx;
		background-image: url(https://nx5.abc5g.com/res/static/logo.png);
		background-size: 100% 100%;
		background-color: #f8f9fb !important;
		border-radius: 50%;
		flex-shrink: 0;
	}
	
	.studentinfo {
		margin-left: 20rpx;
		font-size: var(--text-18);
		flex: 1;
		font-weight: bold;
		color: #ec6d25;
		
		.youxiaoqi{
			font-size: var(--text-14);
		}
	}
	
	.gold {
		margin-left: 20rpx;
		width: 120rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		flex-shrink: 0;
		color: #ec6d25;
	}
</style>